@import 'base.less';
@base-size : 40px;
.btn-icon{
	content: "";
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    margin-top: -2px;
    background: url(../static/images/icon-search.png) no-repeat;
    background-size: 100%;
}
.search{
	width: 685px;
	margin: 0 auto;
	&__engine{
		position: relative;
		width: 150px;
	    height: 40px;
	    line-height: 40px;
	    border: 1px solid @border-color;
	    background-color: #fff;
	    text-align: center;
	    box-sizing: border-box;
	    cursor: pointer;
	    .inline-block;

	    .mac-app &{
	    	border: 1px solid @mac-border-color;
	    }

		&--btn{
			display : block;
			color : @color-0-54;
			text-indent: -10px;

			&:before{
				.btn-icon;
			}

			&:after{
				position: absolute;
				right: 10px;
			    top: 0;
			    bottom: 0;
				display : block;
				content:'';
				width: 0;
			    height: 0;
			    border-left: 7px solid transparent;
			    border-right: 7px solid transparent;
			    border-top: 10px solid #888;
			    margin: auto;
			}
		}

		.lib{
			&:before{
				background-position: 0 -72px;
			}
		}

		.baidu{
			&:before{
				background-position: 0 -60px;
			}
		}

		.bing{
			&:before{		
				background-position: 0 0;
			}
		}

		.google{
			&:before{
				background-position: 0 -24px;
			}
		}

		.sougou{
			&:before{				
				background-position: 0 -36px;
			}
		}


		&--list{
			background-color: #fff;
		    border: 1px solid @border-color;
		    -webkit-transform: rotateX(-90deg);
		    transform: rotateX(-90deg);
		    -webkit-transform-origin: top;
		    transform-origin: top;
		    -webkit-transition: -webkit-transform .3s ease;
		    transition: transform .3s ease;

		    .mac-app &{
		    	border: 1px solid @mac-border-color;
		    }

		    li{
		    	position: relative;
		    }

		    a{
		    	display : block;
				color : @color-0-54;
				text-indent: -10px;

				&.current:after{
					content: '';
					display: block;
					position: absolute;
					right: 14px;
				    top: 0;
				    bottom: 0;
				    margin: auto;
				    width: @base-size / 10;
				    height: @base-size / 10;
				    border-radius: 50%;
				    background-color: @color-green;

				}

				&:before{
					.btn-icon;
				}
		    }

		    &.open{
		    	-webkit-transform: rotateX(-1deg);
    			transform: rotateX(-1deg);
		    }
		}
	}
	
	&__form{
		.inline-block;

		input[type='text']{
			.inline-block;
		    width: @base-size * 10;
		    height: @base-size - 10;
		    line-height: @base-size - 10;
		    padding: 4px 10px;
		    color: @color-0-54;
		    border: 1px solid @border-color;
		    background-color: #fff;

		    .mac-app &{
		    	border: 1px solid @mac-border-color;
		    }
		}

		input[type="submit"]{
			.inline-block;
			width: 100px;
			height: @base-size;
		    line-height: @base-size;
		    padding: 0;
		    color: @color-0-54;
		    background-color: #fff;
		    border: 1px solid @border-color;
		    box-sizing: border-box;
		    cursor: pointer;

		    .mac-app &{
		    	border: 1px solid @mac-border-color;
		    }

		    &:hover{
		    	color: @color-green;
		    }
		}
	}





}